<template>
  <el-drawer
    v-model="dialogVisible"
    title="字符选择器"
    direction="rtl"
    :before-close="closeDialog"
    size="600px"
  >
   <CharacterSelector
        @character-selected="onCharacterSelected"
    />
   <template #footer>
     <span class="dialog-footer">
          <el-button @click="closeDrawer">关闭</el-button>
          </span>
   </template> 
  </el-drawer>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import CharacterSelector from '@/components/characterSelector/character-selector.vue'

const emit = defineEmits(['character-selected','confirm', 'cancel'])
// Data
const dialogVisible = ref(true)

const closeDialog = () => {
  emit('cancel')
  emit('confirm')
  dialogVisible.value = false
}

const onCharacterSelected = (char) => {
  emit('character-selected', char)
}

// Lifecycle
onMounted(() => {
  dialogVisible.value = true  
})

onBeforeUnmount(() => {
  
})
</script>